<template>
  <div style="display: flex;" :class="showBorder ? 'border' : ''">
    <div :class="['chartTab', checkedIndex == index ? ' active' : '']" v-for="(item, index) in tabList" :key="index" @click="selectTab(index, item.key)">
      {{ item.name }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkedIndex: 0,
    };
  },
  props: {
    tabList: {
      type: Array,
      default: () => [],
    },
    showBorder: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    selectTab(index, key){
      this.checkedIndex = index;
      this.$emit('selectTab', key);
    }
  }
};

</script>
<style scoped lang="less">
.border{
  border-bottom: 1px solid #e9e9e9;
}
.chartTab {
  width: 96px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  cursor: pointer;
  font-size: 15px;
  margin-right: 17px;
}
.chartTab.active {
  color: #333;
  font-size: 15px;
  font-weight: bold;
  position: relative;
  color: #D43A3A;
  &::before{
    content: '';
    width: 24px;
    height: 2px;
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #D43A3A;
  }
}
</style>
